<template>
  <div class="recentPlay">
    <div class="top">
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <span>最近播放</span>
    </div>
    <div class="tabs">
      <van-tabs v-model="active" animated>
        <van-tab title="歌曲">
          <musiclist :songs="list"></musiclist>
        </van-tab>
        <van-tab title="歌单">
          <div class="playlist">
            <ul>
              <li v-for="(item,index) in playlist" :key="index"
              >
                <img :src="item.data.coverImgUrl" alt="" />
                <div class="count">
                  <h4>{{ item.data.name}}</h4>
                  <p>by {{item.data.creator.nickname}}</p>
                </div>
                <span> {{ item.playTime | timeFormater("M月D日")}}</span>

              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="视频">
          <div class="playlist">
            <ul>
              <li v-for="(item,index) in video" :key="index">
                <img :src="item.data.coverUrl" alt="" />
                <div class="count">
                  <h4>{{ item.data.name}}</h4>
                  <p>{{ item.data.duration | timeFormater('mm:ss')}} {{ item.data.artists[0].name}}</p>
                </div>
                <span> {{ item.playTime | timeFormater("M月D日")}}</span>

              </li>
            </ul>
          </div>
        </van-tab>

        <van-tab title="声音">
          <div class="playlist">
            <ul>
              <li v-for="(item,index) in voice" :key="index">
                <img :src="item.data.pubDJProgramData.coverUrl" alt="" />
                <div class="count">
                  <h4>{{ item.data.pubDJProgramData.name}}</h4>

                  <p> <i class="iconfont icon-bofang"></i>{{ item.data.pubDJProgramData.adjustedPlayCount |
                    playCountData}}
                  </p>
                </div>
                <!-- <span> {{ item.pubDJProgramData.playTime | timeFormater("M月D日")}}</span> -->

              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="专辑">
          <!-- <div class="playlist">
            <ul>
              <li v-for="(item,index) in voice" :key="index">
                <img :src="item.data.pubDJProgramData.coverUrl" alt="" />
                <div class="count">
                  <h4>{{ item.data.pubDJProgramData.name}}</h4>

                  <p> <i class="iconfont icon-bofang"></i>{{ item.data.pubDJProgramData.adjustedPlayCount |
                    playCountData}}
                  </p>
                </div>
                <span> {{ item.pubDJProgramData.playTime | timeFormater("M月D日")}}</span>
              </li>
            </ul>
          </div> -->
          <div class="zhuaji">暂无播放记录</div>
        </van-tab>
        <van-tab title="播客">
          <div class="zhuaji">暂无播放记录</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs"; //引入时间格式化插件
import musiclist from "@/components/MusicList.vue";
import {
  accessToPlaySongsRecently,
  getforRecentPlay,
  getVideo,
  getvoice,
} from "@/api/recentlyPlayed";
export default {
  components: { musiclist },
  data() {
    return {
      active: 0,
      list: [],
      playlist: [],
      video:[],
      voice:[],
    };
  },
  filters: {
    //   时间格式化
    timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(str);
    },

    //播放量转换单位

    playCountData(value) {
      let val = Math.floor(value / 1000);
      let w = value > 10000 ? val / 10 + '万' : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : w; //亿计算
      return y;
    },
  },
  methods: {
    // 获取最近播放歌曲 
    accessToPlaySongsRecentlyFun() {
      accessToPlaySongsRecently().then((data) => {
        if (data.code == 200) {
          data.data.list.map((item, index) => {
            this.list.push(item.data);
          });
        }
      });
    },
    // 获取最近博方法歌单
    getforRecentPlayFun() {
      getforRecentPlay().then((data) => {
        if (data.code == 200) {
        this.playlist=data.data.list
         
        }
      });
    },
    // 获取最近播放视频
    getVideoFun() {
      getVideo().then((data) => {
        if (data.code == 200) {
          this.video=data.data.list
        }
      });
    },
    // 获取最近播放声音
    getvoiceFun() {
      getvoice().then((data) => {
        if (data.code == 200) {
          this.voice = data.data.list
          console.log(this.voice);
        }
      });
    },

  },
  created() {
    this.accessToPlaySongsRecentlyFun();
    this.getforRecentPlayFun();
    this.getVideoFun()
    this.getvoiceFun()
  },
};
</script>

<style lang="scss" scoped>





.zhuaji{ 
  font-size: 12px;
  text-align: center;
 line-height: 50px;
  color: #999;
}
.icon-bofang{ 
  font-size: 12px;
}
.recentPlay {
  .top {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    i {
      margin: 0 10px;
      font-size: 20px;
    }
    span {
      font-weight: 550;
    }
  }
  .tabs {
    .playlist {
      margin-top: 10px;
      ul {
        li {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
       
          img {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            margin: 0 10px;
          }
          .count {
            flex:  1;
    
            h4 {
              font-size: 15px;
            width: 300px;
             white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
             
               
            }
            p {
              margin-top: 10px;
              font-size: 12px;
              color: #999;
            }
          }
          span{ 
            text-align: center;
            flex: 0 0 60px;
            font-size: 12px;
            margin-top: 25px;
            margin-right: 10px;
              color: #999;
          }
        }
      }
    }
  }
}
</style> 